<template>
  <div>
    <div style="font-size :40px ; text-align: center;">用户管理</div>

    <table border="1" style="width :1000px ; text-align:center">
      <thead>
        <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>等级</th>
          <th>真实姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user,index) in userList" :key="user.userId">
          <td>{{user.userAccount}}</td>
          <td>{{user.userPwd}}</td>
          <td>{{user.userLevel}}</td>
          <td>{{user.userName}}</td>
        </tr>
      </tbody>
    </table>
    <div style="text-align:center">
      <input type="button" value="<" @click="reduce()">
      <input type="button" value=">" @click="increase()">
    </div>
    <div>
      <select name="user" id="user">
        <option value="所有用户" selected>所有用户</option>
        <option value="超级管理员">超级管理员</option>
        <option value="灾情管理员">灾情管理员</option>
        <option value="专家管理员">专家管理员</option>
        <option value="库房管理员">库房管理员</option>
      </select>
      <input type="button" value="查询" @click="select()">
      <input type="button" value="添加用户" @click="addUser()">
      <input type="button" value="修改密码" @click="update()">
      <input type="button" value="删除用户" @click="del()">
      <div v-if="box">
        请输入需要删除的用户Id: <input type="text" id="userId">
        <input type="button" value="提交" @click="del2()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level: "所有用户",
      userList: [],
      pageNO: 1,
      box: false,
      userId: 0
    }
  },
  methods: {
    async getUserList(pageNO) {
      let paramObj = { pageNO: this.pageNO, level: this.level }
      let cutObj = await this.ajax.getSubmit("/api/users/selectLevel", paramObj)
      this.userList = cutObj.list;
      this.level = cutObj.level;
    },

    async getUser(level) {
      let paramObj = { pageNO: this.pageNO, level: this.level }
      let cutObj = await this.ajax.getSubmit("/api/users/selectLevel", paramObj)
      this.userList = cutObj.list;
      this.level = cutObj.level;
    },

    select() {
      var value = document.getElementById("user")
      var index = value.selectedIndex;
      var val = value.options[index].value;
      this.level = val
      this.getUser(this.level)
    },

    addUser() {
      this.$router.push("/addUser")
    },

    update() {
      this.$router.push("/UpdateUser")
    },

    del() {
      this.box = true
    },

    async del2() {
      var userId = document.getElementById("userId").value;
      this.userId = userId

      let paramObj = { userId: this.userId }
      let cutObj = await this.ajax.getSubmit("/api/users/delete", paramObj)

      this.userId = ""
      this.box = false
    },
    increase() {
      this.pageNO++
      this.getUserList(this.pageNO)
    },
    reduce() {
      this.pageNO--
      this.getUserList(this.pageNO)
    }
  },
  created() {// 页面被创建时调用的函数 和data，computed，methods同级
    this.getUserList(1)
  }
}
</script>

<style>

</style>